<template>
  <div class="my-page" :style="{backgroundColor: user ? '' : '#fff'}">
    <van-nav-bar
      class="navBar-parts"
      :title="user ? '个人中心' : '未登录' "
    >
       <div slot="right" class="userEditBox" v-if="user">
        <span class="userEditBtn" @click="$router.push('/userEdit')">编辑资料</span>
       </div>
    </van-nav-bar>
    <!-- 未登录 -->
    <div class="NoLogin"  v-if="!user" >
      <van-button class="NoLoginImg" @click="$router.push('/login')">
        <van-icon name="user-circle-o" />
      </van-button>
    <div class="styleBox">
      <van-button  @click="$router.push('/login')" color="#ed3651" plain round>点击登录</van-button>
      <van-button  @click="$router.push('/register')" color="#ed3651" plain round>点击注册</van-button>
    </div>
    </div>

    <!-- 已登录 -->
    <div class="YesLogin" v-else>
      <div class="myHeader">
        <div class="myEdit">
          <img :src="UserInfoList.photo" class="myHeaderImg">
          <span class="myHeaderText">{{UserInfoList.name}}</span>
        </div>
        <div class="myHomeData">
          <div class="data-item">
            <span>{{UserInfoList.art_count}}</span>
            <span>头条</span>
          </div>
          <div class="data-item">
            <span>{{UserInfoList.follow_count}}</span>
            <span>关注</span>
          </div>
          <div class="data-item">
            <span>{{UserInfoList.fans_count}}</span>
            <span>粉丝</span>
          </div>
          <div class="data-item">
            <span>{{UserInfoList. like_count}}</span>
            <span>获赞</span>
          </div>
        </div>
      </div>

      <!-- 历史导航 -->
      <div class="myNGtion">
        <van-grid :column-num="2" class="myNGtionBox" >
          <van-grid-item icon="star-o"   text="收藏" />
          <van-grid-item icon="clock-o"  text="历史" />
        </van-grid>
      </div>

      <!-- 主页功能 -->
      <div class="myNews">
        <div class="myNewsBtn">
          <span>消息通知</span>
          <van-icon name="arrow" />
        </div>
        <div class="myNewsBtn">
          <span>小智同学</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 退出登录 -->
      <div class="signOut" @click="onSignOut">
        <span class="signOutBtn">退出登录</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserMyData } from '@/service/getDate'
export default {
   name: 'MyPage',
   data () {
    return {
      UserInfoList: []
    }
   },
   created() {
    if(this.user) {
      this.getUserInfo()
    } else {
      this.$store.commit('REMOVETOKEN_KEY')
    }
   },
   computed: {
    ...mapState([
      'user',
    ])
   },
   methods: {
    onSignOut() {
     this.$dialog.confirm({
      message: '你确定退出登录吗？'
     }).then(() => {
      this.$store.commit('TOKEN_KEY', null)
     }).catch(() => {
      console.log('1');
     })
    },
   async getUserInfo() {
      console.log('1');
      try{
        const { data } = await getUserMyData()
        this.UserInfoList = data.data
        console.log(data);
      } catch(err) {
        console.log(err);
        this.$store.commit('REMOVETOKEN_KEY')
        this.$toast.fail('信息获取失败,请稍后重试')
      }
    }
   }
}
</script>

<style lang="scss" scoped>
   .my-page {
     height: 1300px;
     text-align: center;
    //  background-color: #fff;
    .userEditBox {
      color: #fff;
    }
    .NoLogin {
      width: 100%;
      overflow: hidden;
      height: 100%;
      position: relative;
      padding-top: 200px;
      .NoLoginImg {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        font-size: 250px;
        color: #ed3651;
        padding: 0;
      }
      .styleBox {
        position: absolute;
        left: 50%;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        width: 1500px;
        height: 65%;
        transform: translateX(-50%);
        background-color: #ed3651;
        border-radius: 100%;
       /deep/ .van-button  {
          width: 300px;
          margin-top: 30px;
        }
      }
    }
    .YesLogin {
      .myHeader {
        display: flex;
        flex-direction: column;
        height: 400px;
        background: url('../../images/banner.png') no-repeat;
        background-size: cover;
        .myEdit {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 40px 50px;
          .myHeaderImg {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #ed3651;
            overflow: hidden;
            border: 4px solid #fff; 
          }
          .myHeaderText {
            font-size: 45px;
            color: #fff;
            padding-top: 10px;
          }
        }
       .myHomeData {
        display: flex;
        justify-content: space-between;
        font-size: 30px;
        color: #fff;
        padding: 0 60px;
        .data-item {
          display: flex;
          flex-direction: column;
        }
       }
      }
      .myNGtion {
        margin-bottom: 5px;
        .myNGtionBox {
          color: #e8c670;
        }
      }
      .myNews {
        .myNewsBtn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 30px;
          height: 80px;
          margin-bottom: 2px;
          font-size: 28px;
          background-color: #fff;
        }
      }
      .signOut {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        margin-top: 5px;
        background-color: #fff;
        .signOutBtn {
          font-size: 30px;
          color: #ed3651;
        }
      }
    }
   }
</style>